<template>
	<view class="">
    <headBar :title="appTitle"></headBar>
    <view @click='x_redirect("/jjbz/article/detail2")'>aaaaaaa</view>
		<view class="" v-show="!loadShow">
			<view class="u-p-t-20">
				<u-swiper :effect3d="true" height="280" bg-color="#FFFFFF" name="image" border-radius="16" effect3d-previous-margin="40" :list="bannerList" @click="bannerClick" ></u-swiper>
			</view>

			<view >
				<view class="u-p-t-40">
				<scroll-view scroll-x style="" :scroll-into-view="rolldistance" :scroll-with-animation="true">
					<view class="m-nav">
						<view class="" id="akun1" style="padding: 0 16rpx;"></view>
						<view class="scroll-view-item dhs" :id="'akun'+(index+1)" :class="cateStatic==item.type?'tag-active':''" v-if="index < 4"  v-for="(item,index) in categoryList" :key="index" @click="x_redirect('/jjbz/list/list?type=category&id='+item.id)">
              <view class="image-wrap" >
                  <image mode="widthFix" :src="item.image"></image>
              </view>
              <view>
							  {{item.name}}
							</view>
						</view>
					</view>
					</scroll-view>
			</view>
			</view>
      <randImg></randImg>
			<view class="u-p-t-30">
				<view class="u-p-l-40 u-p-r-40 u-p-t-20 u-p-b-20">
					<u-section title="官方推荐" :show-line="false" :bold="false" :font-size="36" sub-title="更多" @click="x_redirect('/jjbz/list/list?type=category&id=-1')"></u-section>
				</view>
				<scroll-view scroll-x style="height: 80rpx;" :scroll-into-view="rolldistance" :scroll-with-animation="true">
					<view class="query u-m-t-10 u-m-b-10 u-m-r-30 u-flex u-row-left">
						<view class="" id="akun1" style="padding: 0 18rpx;"></view>
						<view class="scroll-view-item tags" :id="'akun'+(index+1)" :class="cateStatic==item.type?'tag-active':''"  v-for="(item,index) in tagList" @click="x_redirect('/jjbz/list/list?type=category&id='+item.category_id)">
              {{item.name}}
						</view>
						<view class="" style="width: 40rpx;">ㅤ</view>
					</view>
				</scroll-view>
				<view class="u-flex u-row-left u-flex-wrap u-p-l-40 u-p-t-15">
					<block>
						<block v-for="(item, index) in imageList" >
							<view class="tab" >
                <view v-if="item.txt" style="position: absolute;top:5px;left:5px;background: #fbc02d;color:#FFFFFF;">{{item.txt}}</view>
								<image @click="x_redirect('/jjbz/detail/detail?params='+JSON.stringify(item))" :src="item.thumbnail" lazy-load style="width: 215rpx;height: 350rpx;" mode="aspectFill"></image>
							</view>
						</block>
					</block>
				</view>
			</view>

			<u-loadmore :status="loadStatus" :font-size="24" :margin-top="30" :margin-bottom="20" color="#B8B8B8"/>
			<view class="" style="height: 180rpx;"></view>
		</view>
		<view class="loading_page" v-show="loadShow">
			<image src="/static/loading/loading.gif"></image>
		</view>
		<view @click="backTop" class="back backTop u-flex u-flex-col u-row-center u-col-center" :class="backShow?'backTop_show':'backTop_hide'">
			<image src="/static/backtop.png" style="width: 36rpx;height: 36rpx;"></image>
			<view class="text">顶部</view>
		</view>
		<fooBar nav="home"></fooBar>
	</view>
</template>

<script>
import b from '@/common/base.js';
	export default {
		data() {
			return {
				loadShow: true,
				scrollTop: 0,
				homeTop: 0,
				// 首页数据
				bannerList: [],
				categoryList: [],
				coverList: [],
        imageList:[],
				cateStatic: 'new',
				tagList: [
					{
						type:'new',
						name:'最新',
						more: '',
            category_id:'-1',
					},
					 {
					  	type:'hot',
					  	name:'精选',
						  more: '',
              category_id:'-2',
					 }
					 ],
				// 下拉
				pageIndex: 1,
				loadStatus: 'loadmore',
				// 滚动的位置
				rolldistance: '',
				adFlag: true,
				backShow: false,
			}
		},
		async onLoad() {
			let t = this
			await t.getBannerList()
			await t.getcategoryList()
			await t.getList()

			t.loadShow = false
		},
    async onReachBottom(){
      let t = this;
      if(t.loadStatus == 'nomore') return
      await t.getList()
    },
		methods: {
			// 首页
			async getBannerList(){
        var t = this;
        t.x_request('api/wallpaper.banner', {}, function (t, res) {
          if (res.code === 1) {
            t.bannerList = res.data;
          }
        });
			},
			async getcategoryList(){
        b.getCategoryList(this);
			},
			async getList(){
				let t = this;
        uni.showLoading({
          mask: true,
          title: '正在拼命加载中...'
        })
        t.x_request('api/wallpaper.image', {page:t.pageIndex}, function (t, res) {
          if (res.code === 1) {
            let result = res.data
            if(result.last_page > t.pageIndex){
              t.pageIndex++;
            }else{
              t.loadStatus = 'nomore';
            }
            t.imageList = t.imageList.concat(result.data);
            uni.hideLoading()
          }
        });

			},
			search(){
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},
			backTop(){
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			bannerClick(index){
				this.x_redirect(this.bannerList[index].path)
			},
			detail(id,index,images){
				var str = JSON.stringify(images)
				uni.navigateTo({
					url: '/pages/detail/detail?id='+id+'&index='+index+'&images='+str
				})
			},
			listClick(type,pid,id){
				uni.navigateTo({
					url: '/pages/list/list?type='+type+'&pid='+pid+'&id='+id
				})
			},
			adLoad() {
				this.adFlag = true
			},
			adError(err) {
				this.adFlag = false
			},
			adClose() {
				this.adFlag = false
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
			if(e.scrollTop > 1000){
				this.backShow = true
			}else{
				this.backShow = false
			}
		},
		onShareAppMessage(res) {
			return {
				title: '我等风也等你，近听水无声~',
				path: '/pages/index/index?userId='+this.vuex_user._id
			}
		},
		onShareTimeline(res) {
			return {
				title: '我等风也等你，近听水无声~',
				path: '/pages/index/index'
			}
		}
	}
</script>
<style lang="scss" scoped>
	.vtop{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background-color: #FFFFFF;
		z-index: 999999;
		.title{
			position: relative;
			color: #303030;
			font-size: 20px;
			line-height: 80rpx;
		}
		.search{
			background: #F3F4F5;
			height: 68rpx;
			margin: 20rpx 40rpx 15rpx 40rpx;
			padding-left: 40rpx;
			border-radius: 50px;
			text{
				color: #a6a7a8;
				font-size: 14px;
			}
		}
	}
	.tab{
		position: relative;
		width: 215rpx;
		height: 350rpx;
		border-radius: 16rpx;
		margin-right: 15rpx;
		margin-bottom: 15rpx;
		image{
			border-radius: 16rpx;
		}
		.array{
			position: absolute;
			top: 18rpx;
			right: 0rpx;
			color: #FFFFFF;
			background-color: rgba(0, 0, 0, 0.4);
			padding: 0rpx 12rpx 0 16rpx;
			border-radius: 20rpx 0 0 20rpx;
			font-size: 12px;
		}
	}
	.tags{
		font-size: 14px;
		background-color: #F5F6F8;
		color: #909399;
		border-radius: 40rpx;
		line-height: 60rpx;
		padding: 0 40rpx;
		margin-right: 20rpx;
		white-space:nowrap;
	}
	.tag-active{
		background-image: linear-gradient(100deg, #fcfc44 , #f8c93c);
		color: #333333;
		box-shadow: 0px 0px 10px #fff8ab;
		animation: tiaobig 0.8s ease-in-out alternate infinite;
		animation-iteration-count:1;
	}
	@keyframes tiaobig {
		0% {
			transform: scale(0.98);
		}
		25% {
			transform: scale(1.08);
		}
		50% {
			transform: scale(0.94);
		}
		75% {
			transform: scale(1.06);
		}
		100% {
			transform: scale(1);
		}
	}
	.back{
		position: fixed;
		right: -80rpx;
		width: 80rpx;
		height: 80rpx;
		border-radius: 80rpx;
		padding: 8rpx;
		box-shadow: 0 0px 16px rgba(0, 0, 0, 0.2);
		transition-property: right;
		transition-duration: 0.6s;
		image{
			display: block;
		}
		.text{
			font-size: 12px;
		}
	}
	.backSearch{
		bottom: 300rpx;
		background-color: #efb336;
		.text{
			color: #FFFFFF;
		}
	}
	.backTop{
		bottom: 200rpx;
		background-color: #FFFFFF;
		.text{
			color: #efb336;
		}
	}
	.backTop_show{
		right: 20rpx!important;
	}
	.backTop_hide{
		right: -80rpx!important;
	}
	.m-nav {
	  margin-bottom: 10rpx;
	  padding: 0 20rpx;
	  display: flex;
	  justify-content: center;
	  text-align: center;
	  font-size: 24rpx;
	}

	.m-nav .item {
	  padding: 10rpx 0;
	  flex: 1;
	}

	.m-nav .image-wrap {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  margin: 0 auto;
	  width: 95rpx;
	  height: 100rpx;
	  border-radius: 50%;

	}

	.dhs{
		font-size: 12px;
		color: #000000;
		border-radius: 10rpx;
		line-height: 60rpx;
		padding: 0 40rpx;
		margin-right: 20rpx;
		white-space:nowrap;
	}

	.m-nav .item image {
	  width: 100rpx;
	  height: 100rpx;
	  margin: 0 auto 30rpx;
	}
</style>
